import errorImg from "@/assets/baseImg/error.png?png";
import loadingImg from "@/assets/baseImg/loading.gif?gif";

/**
 * 图片懒加载
 * @param {*} app
 */

export default {
  mounted(el, binding) {
    el.src = loadingImg;

    // 定义观察者，用来观察是否到可是区域
    const observe = new IntersectionObserver(
      ([{ isIntersecting }]) => {
        // 在可视区域
        if (isIntersecting) {
          // 停止观察
          observe.unobserve(el);
          // 加载失败
          el.onerror = () => {
            el.src = errorImg;
          };
          // 将lazy的图片内容，交给src
          el.src = binding.value;
        }
      },
      {
        threshold: 0,
      }
    );
    // 页面挂载后，开启观察
    observe.observe(el);
  },
};
